<template>
    <view class="content">
        <view>
            <u-subsection :list="state.list" :current="state.curNow" @change="sectionChange"></u-subsection>
            <u-line></u-line>
        </view>
        <view class="list">
            <view v-if="!state.order">
                <u-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png"> </u-empty>
            </view>
            <view class="item" v-for="(item, i) in state.order">
                <view class="item-top">
                    <text>订单号：{{ item.ooid }}</text>
                    <text>订单已完成</text>
                </view>
                <u-line></u-line>
                <view class="item-content-list">
                    <view class="item-content-item">
                        <view>
                            <u-image :src="item.goods.img_s[0].url" width="100px" height="110px"></u-image>
                        </view>
                        <view class="item-info">
                            <text style="font-weight: bold;">红酒整箱干红葡萄酒正品礼盒装送礼</text>
                            <text>单价：
                                <text style="color: red;">{{ item.goods.nprice }}</text>
                            </text>
                            <text>购买数量：x{{ item.amount / item.goods.nprice }}</text>
                            <text>合计：
                                <text style="font-size: large; color: red;">{{ item.amount }}</text>
                            </text>
                            <text>
                                {{ item.time }}
                            </text>
                        </view>
                    </view>
                    <!-- <u-line></u-line> -->
                    <!-- <view class="item-content-item">
                        <view>
                            <u-image src="/static/logo.png" width="100px" height="110px"></u-image>
                        </view>
                        <view class="item-info">
                            <text style="font-weight: bold;">红酒整箱干红葡萄酒正品礼盒装送礼</text>
                            <text>单价：
                                <text style="color: red;">398.00</text>
                            </text>
                            <text>购买数量：x2</text>
                            <text>合计：
                                <text style="font-size: large; color: red;">896.00</text>
                            </text>
                            <text>
                                2022年10月28日
                            </text>
                        </view>
                    </view> -->
                </view>
                <u-line></u-line>
                <view class="item-bottom">
                    <!-- <text>共计：
                        <text style="font-size:large;color:red">1584</text>元
                    </text> -->
                    <view><u-button type="primary" text="查看物流" size="mini" shape="circle" :plain="true"></u-button></view>
                    <view><u-button type="primary" text="去评价" size="mini" shape="circle" :plain="true"></u-button></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { reactive } from "vue";
import { getOrderAll } from "../../../network/mine";

const state = reactive({
    order: [],
    list: ['全部', '待付款', '已支付', '已发货', '待评价', '已取消'],
    curNow: 0,
    uid: ''
})

const sectionChange = (index) => {
    state.curNow = index;
    getOrderAll({ uid: state.uid, status: index }).then((e) => {
        state.order = e.data;
    })
}

uni.getStorage({
    key: 'token',
    success: (res) => {
        state.uid = res.data.uid;
        getOrderAll({ uid: res.data.uid, status: state.curNow }).then((e) => {
            state.order = e.data;
        })
    },
    fail: (res) => {
        uni.navigateTo({
            url: '/pages/tabbar/mine/login',
        });
    },
})
</script>

<style lang="scss" scoped>
.content {
    background-color: #fdf6ec;
    width: 100%;
    height: calc(100vh);

    .list {
        margin-top: 5rpx;

        .item {
            width: 100%;
            background-color: #fff;
            font-size: small;
            box-shadow: 1px 1px 1px rgb(226, 224, 224);
            margin-top: 5rpx;
            border-radius: 10rpx;

            .item-top {
                width: 100%;
                height: 50rpx;
                display: flex;
                place-content: space-around;
                place-items: center;

            }

            .item-content-list {
                display: grid;

                // background-color: #aeadad;
                .item-content-item {

                    width: 100%;
                    height: 250rpx;
                    display: grid;
                    place-items: center;
                    grid-auto-flow: column;
                    grid-auto-columns: 100rpx, 1fr;
                }

                .item-info {
                    display: grid;
                    place-self: center start;
                    // place-content: space-between;
                }
            }

            .item-bottom {
                width: 100%;
                height: 50rpx;
                display: grid;
                // background-color: ;  
                place-content: space-around;
                grid-auto-flow: column;
                place-items: center;
            }
        }
    }
}
</style>